<template>
    <div class="tombstone-container">
      <div
        ref="contentRef"
        class="tombstone-content"
        :style="{ fontSize: calculatedFontSize + 'px' }"
      >
        {{ combinedText }}
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, watch, onMounted, nextTick, defineProps } from 'vue';
  
  // --- Props 定义 ---
  interface Props {
    name: string;
    epitaph?: string;
    // 预设的最大/最小字体大小
    maxFontSize?: number;
    minFontSize?: number;
    color?: string;
  }
  
  const props = withDefaults(defineProps<Props>(), {
    maxFontSize: 22, // 默认最大字号 (1.4rem ~ 22px)
    minFontSize: 10, // 默认最小字号
  });
  
  // --- Refs ---
  const contentRef = ref<HTMLElement | null>(null); // Ref 获取内容元素
  const calculatedFontSize = ref<number>(props.maxFontSize); // 初始尝试最大字号
  
  // --- Computed ---
  // 将名字和墓志铭合并为一个字符串，方便处理
  const combinedText = computed(() => {
    return props.name + (props.epitaph ? `${props.epitaph}` : '');
    // 注意：名字和墓志铭之间没有加空格或换行符，竖排时它们会紧挨着
    // 如果需要分隔，可以在这里加特殊字符或换行符，但竖排效果可能需要调整
  });
  
  // --- 核心逻辑：调整字体大小 ---
  const adjustFontSize = async () => {
    if (!contentRef.value || !combinedText.value) {
      // console.log("No content element or text");
      return;
    }
  
    const element = contentRef.value;
    const containerHeight = 160; // 容器固定高度
    const containerWidth = 140; // 容器固定宽度
    const maxColumns = 3;
  
    // 移除临时样式，重置状态
    element.style.fontSize = ''; // 清除内联字号，使用CSS初始值或上次计算值
    element.style.width = ''; // 清除可能的临时宽度
  
    let currentFontSize = props.maxFontSize;
    calculatedFontSize.value = currentFontSize; // 先设置为最大
  
    // 使用二分查找或迭代递减来找到合适的字号
    let low = props.minFontSize;
    let high = props.maxFontSize;
    let bestFitSize = props.minFontSize; // 默认为最小，至少能显示
  
    // 迭代几次来查找，或者用二分查找
    for (let i = 0; i < 10; i++) { // 限制迭代次数防止死循环
        let mid = Math.floor((low + high) / 2);
        if (mid < props.minFontSize) mid = props.minFontSize;
        if (mid > props.maxFontSize) mid = props.maxFontSize;
  
        // console.log(`Trying font size: ${mid}px (low: ${low}, high: ${high})`);
  
        // 应用测试字号
        element.style.fontSize = `${mid}px`;
  
        // 等待 DOM 更新
        await nextTick();
  
        // --- 检查是否满足条件 ---
        // 在 writing-mode 下：
        // scrollHeight: 内容实际需要的垂直空间（即单列的长度）
        // offsetHeight: 元素的视觉高度 (应该是 160px)
        // scrollWidth: 内容实际需要的水平空间 (即所有列的总宽度)
        // offsetWidth: 元素的视觉宽度 (应该是 140px)
  
        const contentHeight = element.scrollHeight;
        const contentWidth = element.scrollWidth;
        const requiredColumns = Math.ceil(contentWidth / (element.clientWidth / maxColumns)); // 估算需要的列数 (不精确)
  
        // console.log(`  scrollHeight: ${contentHeight}, scrollWidth: ${contentWidth}`);
        // console.log(`  offsetHeight: ${element.offsetHeight}, offsetWidth: ${element.offsetWidth}`);
  
        // 条件：内容高度不超过容器高度，且内容宽度暗示的列数不超过 maxColumns
        // 注意：scrollWidth 在列数很少时可能不准确反映所需列数，这里用 clientWidth / maxColumns 估算单列宽度
        // 更可靠（但复杂）的方法可能是检查 scrollWidth 是否大于 clientWidth, clientWidth*2 等
        const fitsHeight = contentHeight <= containerHeight + 2; // 加一点容差
        const fitsWidthApprox = contentWidth <= containerWidth + 2; // 宽度也不能超出太多
  
  
        // console.log(`  Fits Height: ${fitsHeight}, Fits Width Approx: ${fitsWidthApprox}`);
  
  
        if (fitsHeight && fitsWidthApprox) {
            // 如果当前字号合适，尝试更大的字号，并记录当前为可能的最佳值
            // console.log("  Fits! Trying larger.");
            bestFitSize = mid; // 记录当前可行的字号
            low = mid + 1;
        } else {
            // 如果当前字号太大，尝试更小的字号
            // console.log("  Too large! Trying smaller.");
            high = mid - 1;
        }
  
        if (low > high) break; // 搜索范围结束
    }
  
     // console.log(`Best fit font size: ${bestFitSize}`);
    calculatedFontSize.value = bestFitSize;
    // 最后应用找到的最佳字号
    element.style.fontSize = `${bestFitSize}px`;
    element.style.color = props.color || '#fddebf';
  
  };
  
  // --- Lifecycle Hooks ---
  onMounted(() => {
    adjustFontSize();
  });
  
  // 监听文本变化，重新计算
  watch(combinedText, () => {
    // 需要延迟执行，确保 DOM 结构稳定
    nextTick(() => {
        adjustFontSize();
    });
  });
  
  // 也监听容器尺寸变化（如果容器尺寸是动态的，需要 ResizeObserver）
  // 这里假设容器尺寸固定，省略 ResizeObserver
  
  </script>
  
  <style scoped>
  .tombstone-container {
    width: 140px;
    height: 160px;
    padding: 10px 5px; /* 调整 padding，给竖排内容更多空间 */
    box-sizing: border-box;
    display: flex; /* 用于居中内容块 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow: hidden; /* 隐藏确定放不下的内容 */
  }
  
  .tombstone-content {
    writing-mode: vertical-lr; /* 核心：竖排，从右到左 */
    text-orientation: upright; /* 让非 CJK 字符保持直立 */
    /* font-family: 'KaiTi', '楷体', 'STKaiti', serif; */
    line-height: 1.6; /* 竖排时的行高（即字符间距） */
    letter-spacing: 0.1em; /* 竖排时的字间距（即列间距） */
    max-height: 100%; /* 内容高度限制为容器高度 */
    /* 宽度由内容和字体大小决定，会自动换列 */
    /* text-align: center; */ /* 竖排下的 text-align 是水平对齐，可能不需要 */
    /* 初始字体大小由 JS 控制 */
    white-space: normal; /* 允许自动换列 */
    font-family: SimLi, LiSu, STLiti, SimKai, 隶书, 微软简隶书, 楷体, 宋体, 'Microsoft YaHei', 微软雅黑;
    color: #fddebf;
    text-rendering: optimizeLegibility;
  }
  </style>